<template>
  <div id="app">
    <!-- 头部组件 -->
    <Header></Header>
    <!-- 路由组件 -->
    <router-view></router-view>
    <!-- 底部组件 -->
    <!-- 在Home Search页面显示，在Login Register页面不显示 -->
    <!-- 方式1. 每个组件都可以通过 $route.path 获取当前路由信息 -->
    <!-- <Footer v-show="$route.path == '/home' || $route.path == '/search'"></Footer> -->
    <!-- 方式2. 在配置路由的时候增加 meta 信息来判断时候显示 -->
    <Footer v-show="$route.meta.show"></Footer>
  </div>
</template>

<script>
import Header from './components/Header/Header.vue'
import Footer from './components/Footer/Footer.vue'

export default {
  components: {
    Header,
    Footer
  },
  mounted() {
    // 只请求一次，优化了性能
    // 执行 store 中定义的请求函数
    this.$store.dispatch('categoryList')
  }
}
</script>

<style lang="less" scoped></style>
